/**
 * Created by Ysssssss on 2021/5/3.
 */

import React, { PureComponent } from 'react'
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";
import {Col, Form, Radio, Row} from "antd";
import ProductChoose from "@components/shoppingMall/design/ProductChoose";
import {DesignTemplateContext} from "@pages/shoppingMall/ShoppingMallDesignDetailPage";
import {withRouter} from "react-router-dom";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {priceRangePreview} from "@utils/priceConversion";

@withRouter
class CartDesign extends PureComponent {
    static contextType = DesignTemplateContext;
    constructor(props, context) {
        super(props, context);

        const { subNav } = context
        const { platformId } = getHistoryMatchParams(props)
        if (!subNav.includes('cart')) {
            props.history.replace(`/shopping-mall/design/${platformId}/detail`)
        }
    }

    onTargetChange (key, e) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('cart', {
            ...templateInfo.cart,
            [key]: e.target.value
        })
    }

    onValueChange (key, value) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('cart', {
            ...templateInfo.cart,
            [key]: value,
        })
    }

    getDefaultProductList () {
        const { templateInfo } = this.context
        const { cart } = templateInfo
        const defaultProductInfo = {
            picture: '',
            name: '商品名称',
            price_range: '商品价格'
        }
        switch (cart.type) {
            case 'one-one':
                return [defaultProductInfo]
            case 'one-two':
                return new Array(2).fill(defaultProductInfo)
            case 'one-three':
                return new Array(3).fill(defaultProductInfo)
            case 'one-more':
                return new Array(4).fill(defaultProductInfo)
        }
    }

    render () {
        const { templateInfo } = this.context
        const { cart } = templateInfo
        let productList = cart.goods.length ? cart.goods : this.getDefaultProductList()
        return (
            <>
                <div className="preview-container">
                    <div className="preview-reality cart-preview">
                        <ShoppingMallPreviewShareIcon/>
                        <div className="preview-title">购物车</div>
                        <img src={require("@assets/image/design-product-empty.png")} alt="" className="w-100"/>
                        <div className={`product-list-preview cur-poi ${cart.type}`}>
                            { productList.map((prod, index) => (
                                <div className="product-item" key={prod.id || `default_${index}`}>
                                    { prod.picture ? (
                                        <img className="product-img" src={prod.picture} alt=""/>
                                    ) : (
                                        <div className="product-img empty-bg" />
                                    ) }
                                    <div className="product-name">{ prod.name }</div>
                                    <div className="product-price">{ priceRangePreview(prod.price_range) }</div>
                                </div>
                            )) }
                        </div>
                    </div>
                </div>
                <div className="operation-container ft-clr-d">
                    <div className="ft-16 pdb-16 bdb-l">商品</div>
                    <Row className="mgt-36">
                        <Col span={6}>样式：</Col>
                        <Col span={18}>
                            <Radio.Group value={cart.type}
                                         onChange={this.onTargetChange.bind(this, 'type')}
                            >
                                <Radio value="one-one">单行单列</Radio>
                                <Radio value="one-two" className="mgl-16">单行双列</Radio>
                                <Radio value="one-three" className="mgt-16">单行三列</Radio>
                                <Radio value="one-more" className="mgt-16 mgl-16">单行多列</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                    <div className="mgt-36">
                        <ProductChoose value={cart.goods} onChange={this.onValueChange.bind(this, 'goods')}/>
                    </div>
                </div>
            </>
        )
    }
}

export default CartDesign